{strip}

{literal}
<style type="text/css">
	label.error { float: left; color: red; padding-left: .5em; vertical-align: top; font-size: 10pt;}
	p {padding-bottom: 5px;}
	em { font-weight: bold; padding-right: 1em; vertical-align: top; margin-top:10px; margin-bottom: 10px;}
</style>


<script>

jQuery.validator.setDefaults({
	debug: true,
	success: "valid"
});

jQuery.validator.addMethod("password", function( value, element ) {
		var result = this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value);
		if (!result) {
			element.value = "";
			var validator = this;
			setTimeout(function() {
				validator.blockFocusCleanup = true;
				element.focus();
				validator.blockFocusCleanup = false;
			}, 1);
		}
		return result;
}, "Your password must be at least 6 characters long and contain at least one number and one character.");


$(document).ready(function() {
	//$('#users_add_form').validate();
	var options = { 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    }; 
 
    $("#registerForm").validate({
   		rules: {
		    'addForm[password]': {
		    	required: true,
		    	minlength: 6
		    },
		    'addForm[password2]': {
		      equalTo: "#password"
		    },
		    'addForm[username]': {
		    	required: true,
		    	minlength: 6
		    },
		    
		},
		
		onkeyup: false,
		
    	submitHandler: function(form) {
   			form.submit();
   		},

   		messages: {
			'addForm[password2]': {
				equalTo: "Please enter the same password as above"	
			},
			'addForm[email]': {
				email: "Please enter a valid email address, example: you@yourdomain.com",
				
			},
			'addForm[username]': {
				minlength: "Your username must be at least 6 characters long.",
				remote: jQuery.validator.format("{0} is already taken, please enter a different username.")	
			}
				
		}

	});

    // bind to the form's submit event 
    
   /* $('#users_add_form').submit(function() { 
    	//fakeSubmit.UpdateEditorFormValue();
        $(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        
    
        return false;
    });*/
    
    
});

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    //return checkForm(); 
} 
 
// post-submit callback 
function showResponse(responseText, statusText)  { 
	scroll(0,0);
	showPopup(responseText, 'Register', false);
	//window.location.reload();
}

function checkForm(){

}
</script>

<style>

#registerBox {
	padding: 10px;
	background-color: #EEEEEE;
	-moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
}

#registerBox input{
	width: 80%;
	height: 40px;
	background-color:#F5F5E5;
	color: #4F535E;
	font-size: 16pt;
}

#registerBox h1{
	font-size: 24pt;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

#registerBox h2{
	font-size: 17pt;
	font-weight: normal;
	padding: 0px;
	margin: 0px;
}

#registerBox .submit{
	width: 120px;
	background-color: #FAFAFA;
	border-bottom: 2px solid #B6B6B6;
	border-right: 2px solid #B6B6B6;
	border-left: 1px solid #B6B6B6;
	border-top: 1px solid #B6B6B6;
	cursor: pointer;
}
</style>
{/literal}


<!-- content -->
            <div id="content">
            	
                <div id="content_left">
                <div id="registerBox">
                	<h1>New to XPROJECT?</h1>
                	<h2>Join now! It's easy and free. Already a member? <a href="/login">Sign in</a> »</h2>
                	<br />
                	<form id="registerForm" method="POST" action="/index/register-save" onsubmit="">
                	<input type="hidden" name="addForm[appsId]" value="{$appsId}" />
					<p>
						<label><b>Your email</b></label><em>*</em><br />
						<input type="text" id="email" name="addForm[email]" value="{if $formData}{$formData.email}{/if}"   class="required email" minlength="3" onfocus="$('#email').css('backgroundColor', '#FFFFAA');" onblur="$('#email').css('backgroundColor', '#F5F5E5');"/>
					</p>
					<p>
						<label><b>Choose a username</b></label><em>*</em><br />
						<input id="username" type="text" name="addForm[username]" value="{if $formData}{$formData.username}{/if}" onfocus="$('#username').css('backgroundColor', '#FFFFAA');" onblur="$('#username').css('backgroundColor', '#F5F5E5');"/>
					</p>
					<p>
						<label for="password"><b>Choose password</b></label><em>*</em><br />
						<input id="password" type="password" name="addForm[password]" value="{if $formData}{$formData.password}{/if}" class="required"  onfocus="$('#password').css('backgroundColor', '#FFFFAA');" onblur="$('#password').css('backgroundColor', '#F5F5E5');"/>
					</p>
					<p>
						<label for="password2"><b>Confirm password</b></label><em>*</em><br />
						<input id="password2" type="password" name="addForm[password2]" value="{if $formData}{$formData.password2}{/if}"   onfocus="$('#password2').css('backgroundColor', '#FFFFAA');" onblur="$('#password2').css('backgroundColor', '#F5F5E5');"/>
					</p>
					<div class="left" style="width: 40%">
						<input type="hidden" name="captchaId" value="{$captchaId}" />
						<p style="font-size: 6pt; text-align: center;">{$captcha}</p>
					</div>
					<div class="left">
						<label><b>Rewrite phrase from the image</b></label><br />
						<input id="captcha" type="text" name="addForm[captchaText]" value="" onfocus="$('#captcha').css('backgroundColor', '#FFFFAA');" onblur="$('#captcha').css('backgroundColor', '#F5F5E5');" style="width: 100px;{if $message}border: 1px solid red;{/if}"/>{if $message}<i style="color: red;">{$message}</i>{/if}
					</div>
					<div class="clear"></div>
					<div class="v_spacer"> </div>
					<div>

						<div class="right">
							<input type="submit" value="Join" class="submit" id="sub1" onmouseover="$('#sub1').css('color', '#d0d0d0');" onmouseout="$('#sub1').css('color', '#515151');"/>
						</div>
					</div>
					<div class="clear"></div>
					</form>
                </div>
				</div>
                
                <div id="content_right">
                	
                	{include file='block_categories.tpl'}
                    <br />
                    {include file='block_requests.tpl'}
                    <br />
                </div>
            	<div class="clear"></div>
            </div>
            <!-- end content  -->
{/strip}